'use client';

import React from 'react';
import { useFormState, useFormStatus } from 'react-dom';
import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
import { authenticateAction } from '@/lib/actions';
import clsx from 'clsx';

export function LoginForm() {
    const [errorMessage, dispatch] = useFormState(authenticateAction, undefined);

    return (
        <form
            action={dispatch}
            className='relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 rounded-xl border  bg-card p-4 text-card-foreground shadow'
        >
            <h1 className='font-semibold'>登录以获得文件操作权限</h1>
            <div className='flex gap-2 flex-col'>
                <label
                    htmlFor='name'
                    className='text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
                >
                    用户名
                </label>
                <input
                    id='name'
                    name='name'
                    className='flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 pl-4 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
                    placeholder='请输入用户名'
                />
                <div
                    className='flex items-end space-x-1'
                    aria-live='polite'
                    aria-atomic='true'
                >
                    {errorMessage?.name && (
                        <>
                            <ExclamationCircleIcon className='h-5 w-5 text-red-500' />
                            <p className='text-sm text-red-500'>{errorMessage?.name}</p>
                        </>
                    )}
                </div>
            </div>
            <div className='flex gap-2 flex-col'>
                <label
                    htmlFor='password'
                    className='text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
                >
                    密码
                </label>
                <input
                    id='password'
                    name='password'
                    className='flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 pl-4 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
                    placeholder='请输入密码'
                    type='password'
                />
                <div
                    className='flex items-end space-x-1'
                    aria-live='polite'
                    aria-atomic='true'
                >
                    {errorMessage?.password && (
                        <>
                            <ExclamationCircleIcon className='h-5 w-5 text-red-500' />
                            <p className='text-sm text-red-500'>{errorMessage?.password}</p>
                        </>
                    )}
                </div>
            </div>
            <div className='text-center'>
                <LoginButton />
            </div>
        </form>
    );
}

function LoginButton() {
    const { pending } = useFormStatus();

    return (
        <button
            className={clsx('inline-flex items-center px-4 py-2 font-semibold leading-6 text-sm shadow rounded-md text-white bg-indigo-500 hover:bg-indigo-400 transition ease-in-out duration-150 ', {
                'cursor-not-allowed': pending,
            })}
            type='submit'
            disabled={pending}
            title='登录'
        >
            {pending && (
                <svg
                    className='animate-spin -ml-1 mr-3 h-5 w-5 text-white'
                    xmlns='http://www.w3.org/2000/svg'
                    fill='none'
                    viewBox='0 0 24 24'
                >
                    <circle
                        className='opacity-25'
                        cx='12'
                        cy='12'
                        r='10'
                        stroke='currentColor'
                        stroke-width='4'
                    ></circle>
                    <path
                        className='opacity-75'
                        fill='currentColor'
                        d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
                    ></path>
                </svg>
            )}
            登录
        </button>
    );
}
